<template>
  <view class="content">
    <view class="uni-list">
      <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in liveData" :key="index" @tap="openinfo" :data-uid="item.uid">
        <view class="uni-media-list">
          <!-- <image class="uni-media-list-logo" :src="item.user_cover"></image> -->
		  <view class="uname">{{ item.uname }}</view>
		  <view class="follownum">{{ item.follower_num }}粉丝</view>
		  <view class="medal">粉丝牌：{{ item.medal_name }}</view>
          <view class="uni-media-list-body">
            <view class="live_title">{{ item.title }}</view>
            <view class="live_status">
              直播状态：{{ item.live_status === 1 ? '正在直播' : '未开播' }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import liveDataJson from '@/data/data.json'

export default {
  name: 'PP',
  data() {
    return {
      liveData: [], // 使用 liveData 存储新闻列表
      audioContext: null // 添加音频上下文
    };
  },
  async mounted() {
    this.audioContext = uni.createInnerAudioContext(); // 初始化音频上下文
    this.audioContext.src = '@/static/audio/alert.mp3'; // 设置音频文件路径
    this.audioContext.onPlay(() => {
      console.log('开始播放');
    });
    this.audioContext.onError((res) => {
      console.log(res.errMsg);
      console.log(res.errCode);
    });
  },
  beforeDestroy() {
    // 确保在组件销毁前清除定时器，防止内存泄漏
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
    this.audioContext.destroy(); // 销毁音频上下文
  },
  onLoad: function() {
    uni.showLoading({
      title: "Loading..."
    })
    // 使用本地JSON数据代替网络请求
    this.liveData = liveDataJson;
    uni.hideLoading();
  },
  watch: {
    liveData: {
      handler(newVal, oldVal) {
        newVal.forEach((newItem, index) => {
          const oldItem = oldVal[index];
          if (oldItem && oldItem.live_status === 0 && newItem.live_status === 1) {
            this.audioContext.play(); // 播放音频
          }
        });
      },
      deep: true // 深度监听数组变化
    }
  },
  methods: {
    openinfo(e) {
      var uid = e.currentTarget.dataset.uid ;
      uni.navigateTo({
        url: '../info/info?uid='+uid
      });
    }
  },
}
</script>

<style>
.uni-medea-list-body{
	height: auto;
}
.uni-media-list-text-top{
	line-height: 1.6em;
}
.uname {
	font-weight: bold;
    color: hotpink; 
    font-size: 2em; 
}
.live_status{
	color: red; 
	font-size: 1.6em; 
}
.live_title{
	color: skyblue;
	font-size: 1.6em; 
}
.follownum{
	color: yellowgreen;
	font-size: 1.4em; 
}
.medal{
	color: orange;
	font-size: 1.4em; 
}
</style>
